<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="showAddFrom">新增</el-button>
                    <el-button type="primary" @click="importData" :loading="importDataLoading">导入</el-button>
                    <el-button type="primary" :disabled="selectItem.length==0" @click="deleteRow()">删除</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="orgCodeOrName">
                        <el-input v-model="formInline.orgCodeOrName" clearable placeholder="请输入公司编码/名称" />
                    </el-form-item>
                    <el-form-item prop="taxNo">
                        <el-input v-model="formInline.taxNo" clearable placeholder="请输入税号" />
                    </el-form-item>
                </SearchForm>
            </template>
          <template #table="tableScope">
            <PubilcTable :table-data="tableData" :tableHeight="tableScope.tableHeight" :list-config="columns" :showSelect='true' :page-data="pageData"
                @on-action="onAction" @on-selectChange="changeSelectItem" />
          </template>
        </page-view>
        <page-main>
        </page-main>
        <eForm :dialog-visible="dialogVisible" :isAdd="isAdd" :formData="formData" @on-submit="formSubmit"
            @handle-close="handleClose" />
        <ImportForm :dialog-visible="dialogVisible2" :acceptOption='acceptOption' :show-down="false"
            @on-submit="formSubmit2" @handle-close="handleClose" />
    </div>
</template>
<script  setup name="companyInformation">
import { reactive, ref } from 'vue'
import eForm from './components/addForm.vue'
import api from '@/api/index'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ORGSTATUSOPTION } from './components/config'
import config from '@/settings'

const formInline = reactive({})
const formRef = ref(null)
const form = ref({})
const formData = ref({})
const dialogVisible = ref(false)
const orgOptions = ref([])
const isAdd = ref('add')
const dialogVisible2 = ref(false)
const importDataLoading = ref(false)
const data = ref([])
const acceptOption = ref('.xls,.xlsx')
const tableData = ref([])
const selectItem = ref([])
const OPERTATE = [
    { alias: 'edit', label: '编辑' },
    { alias: 'del', label: '删除' }
]
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})
const columns = [
    { alias: 'orgCode', label: '公司编码', showTooltip:true},
    { alias: 'fullName', label: '公司名称', showTooltip:true },
    { alias: 'taxNo', label: '税号', showTooltip:true},
    { alias: 'telPhone', label: '电话', showTooltip:true},
    { alias: 'address', label: '地址', showTooltip:true },
    { label: '操作', listArr: OPERTATE, width: '120px', type: 'action', fixed: 'right' }
]

const onAction = ([item, row]) => {
    const obj = {
        'del': deleteRow,
        'edit': editRow,
        'pageNum': onSearch,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        if (item === 'pageSize') pageData.value.pageNum = 1
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}

onMounted(()=>{
    onSearch()
})
const onSearch = () => {
    const params = {...formInline, ...pageData.value}
    api.dataMaintenance.getOrgTreeList(params).then((res)=>{
        tableData.value = res.list || []
        pageData.value.total = res.total || 0
    })
}
const editRow = (row)=>{
    formData.value = row
    isAdd.value = 'edit'
    dialogVisible.value = true
}

const handleNodeClick = data => {
    form.value = data
    formData.value = data
}
const showAddFrom = () => {
    isAdd.value = 'add'
    dialogVisible.value = true
}
const formSubmit = (val)=>{
    const params = {...val}
    if(isAdd.value === 'add'){
        api.dataMaintenance.addOrgTree(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '新增成功!'
            });
            dialogVisible.value = false
            onSearch()
        })
    }else{
        api.dataMaintenance.editOrgTree(params).then((res)=>{
            ElMessage({
                type: 'success',
                message: '修改成功!'
            });
            dialogVisible.value = false
            onSearch()
        })
    }
}
const formSubmit2 = (val) => {
    let fd = new FormData()
    fd.append('file', val.file)
    api.dataMaintenance.excelOrgTree(fd).then((res)=>{
        ElMessage({
            type: 'success',
            message: '导入成功!'
        });
        dialogVisible2.value = false
        importDataLoading.value = false
        onSearch()
    })
}
const handleClose = val => {
    dialogVisible.value = val
    dialogVisible2.value = val
    importDataLoading.value = false
}
const importData = () =>{
    dialogVisible2.value = true
    importDataLoading.value = true
}
const changeSelectItem = (data)=>{
    selectItem.value = data
}
const deleteRow = (val)=>{
    if(val){
        ElMessageBox.confirm('确定删除此公司信息吗？删除后将不可恢复。', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            const params = {
                ids: val.id,
            }
            api.dataMaintenance.deleteOrgTree(params).then((res)=>{
                ElMessage({
                    type: 'success',
                    message: '删除成功!'
                });
                onSearch()
            })
        })
    }else{
        if(selectItem.value.length > 0){
            ElMessageBox.confirm('确定删除此公司信息吗？删除后将不可恢复。', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = (selectItem.value || []).map((item) =>{
                    return item.id
                });
                const params = {
                    ids: ids.toString()
                }
                api.dataMaintenance.deleteOrgTree(params).then((res)=>{
                    ElMessage({
                        type: 'success',
                        message: '删除成功!'
                    });
                    onSearch()
                })
            })
        }else{
            ElMessage({
                type: 'error',
                message: '请至少勾选一项数据!'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.clearfix {
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    margin-bottom: 10px;
    &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    .role-span{
        font-weight: 700;
        color: #303133;
        font-size: 15px;
    }
}
.fixButtom{
    float: right;
}
</style>
